<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--设置网页窗口固定大小-->
  <title>海量阅读 - 书籍详情</title>


  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入Font Awesome图标 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    body {
      font-family: "Microsoft YaHei", Georgia, serif;
      background-color: #f5f3e6; /* 纸张色背景 */
      color: #333;
      line-height: 1.8;
    }

    /* 导航栏 */
    .navbar {
      background-color: #79bcff;
      padding: 0.5rem 0;
    }

    .navbar-brand, .nav-link {
      color: rgb(40, 40, 40) !important;
      font-weight: bold;
    }

    .nav-link:hover {
      color: #3c8dff !important;
    }



    .nav-link:hover {
      color: #3c8dff ;
    }

    .footer {
      background-color: hsl(216, 100%, 96%);
      color: #424242;
      padding: 3rem 0;
      margin-top: 3rem;
    }
    /* 卡片轮播图样式 */
    /* 团队轮播图区域样式 */
    .team-carousel-section {
      padding: 60px 0; /* 上下内边距为60px，左右为0 */
      background: #f8fbff; /* 设置背景颜色为浅灰色 */
    }

    /* 团队轮播图容器样式 */
    .team-carousel-container {
      position: relative; /* 设置相对定位 */
      width: 90%; /* 宽度为父容器的90% */
      max-width: 1200px; /* 最大宽度为1200px */
      margin: 0 auto; /* 上下边距为0，左右自动居中 */
      height: 40vh; /* 高度为视窗高度的66% */
      display: flex; /* 使用弹性布局 */
      justify-content: center; /* 水平居中对齐 */
      align-items: center; /* 垂直居中对齐 */
      flex-direction: column; /* 设置弹性项目为列方向排列 */
    }

    /* 关于标题的样式 */
    .about-title {
      position: absolute;  /* 绝对定位 */
      top: 15px;          /* 距离顶部15px */
      left: 50%;          /* 水平居中 */
      font-size: clamp(2.5rem, 6vw, 5rem);  /* 响应式字体大小，最小2.5rem，最大5rem，6vw为基准 */
      font-weight: 900;  /* 字体粗细为900，非常粗体 */
      transform: translate(-50%);  /* 水平方向向左移动50%，实现居中 */
      background: linear-gradient(  /* 渐变背景效果 */
        to bottom,  /* 从上到下的渐变方向 */
        rgb(20 50 150/0.5)30%,  /* 起始颜色：带35%透明度的深蓝色，占30%高度 */
        rgb(255 255 255 / 0%) 75%  /* 结束颜色：完全透明的白色，占75%高度 */
      );
      background-clip: text;  /* 背景裁剪为文本形状 */
      color: transparent;  /* 文本颜色设为透明，显示背景 */
      pointer-events: none;  /* 禁止鼠标事件穿透 */
      white-space: nowrap;  /* 防止文本换行 */
    }

    /* 轮播图容器样式 */
    .carousel-container {
      position: relative;  /* 相对定位 */
      width: 100%;        /* 宽度占满父容器 */
      height: 70%;        /* 高度为父容器的70% */
      perspective: 1000px;  /* 3D透视效果，值为观察者与Z平面的距离 */
      margin-top: 260px;  /* 顶部外边距60px */
    }

    /* 轮播图轨道样式 */
    .carousel-track {
      position: relative;  /* 相对定位 */
      width: 100%;        /* 宽度占满父容器 */
      height: 100%;      /* 高度占满父容器 */
      display: flex;     /* 使用弹性布局 */
      justify-content: center;  /* 水平居中对齐 */
      align-items: center;  /* 垂直居中对齐 */
      transform-style: preserve-3d;  /* 保留3D变换效果 */
      transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* 变换过渡效果，持续0.8秒，使用贝塞尔曲线 */
    }

    .card {
      position: absolute;
      width: 220px;
      height: 300px;
      background: white;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
      transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      cursor: pointer;
    }

    .card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .card.center {
      z-index: 10;
      transform: scale(1.1) translateZ(0);
    }

    .card.center img {
      filter: none;
    }

    .card.left-2 {
      z-index: 1;
      transform: translate(-320px) scale(0.8) translateZ(-240px);
      opacity: 0.7;
    }

    .card.left-2 img {
      filter: grayscale(100%);
    }

    .card.left-1 {
      z-index: 5;
      transform: translate(-160px) scale(0.9) translateZ(-80px);
      opacity: 0.9;
    }

    .card.left-1 img {
      filter: grayscale(100%);
    }

    .card.right-1 {
      z-index: 5;
      transform: translate(160px) scale(0.9) translateZ(-80px);
      opacity: 0.9;
    }

    .card.right-1 img {
      filter: grayscale(100%);
    }

    .card.right-2 {
      z-index: 1;
      transform: translate(320px) scale(0.8) translateZ(-240px);
      opacity: 0.7;
    }

    .card.right-2 img {
      filter: grayscale(100%);
    }

    .card.hidden {
      opacity: 0;
      pointer-events: none;
    }

    /* 会员信息样式 */
    .member-info {
      text-align: center;    /* 文本居中对齐 */
      margin-top: 180px;      /* 上边距为20像素 */
      transition: all 0.5s ease-out;  /* 所有属性变化时的过渡效果，持续0.5秒，缓出 */
    }

    .member-name {
      position: relative;
      display: inline-block;
      color: rgb(106, 146, 239);
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 10px;
      transition: 0.5s;
    }

    .member-name::before,
    .member-name::after {
      position: absolute;
      content: "";
      top: 50%;
      width: 80px;
      height: 2px;
      background: rgb(106, 146, 239);
    }

    .member-name::before {
      left: -100px;
    }

    .member-name::after {
      right: -100px;
    }

    .member-role {
      position: relative;
      color: #888;
      font-size: 1.2rem;
      font-weight: 500;
      opacity: 0.8;
      letter-spacing: 0.1em;
      padding: 0px 0;
      transition: 0.5s;
    }

    /* 分页指示器容器样式 */
    .dots {
      display: flex;            /* 使用弹性布局 */
      justify-content: center;  /* 水平居中对齐 */
      gap: 10px;                /* 设置各个点之间的间距为10像素 */
      margin-top: 0px;         /* 顶部外边距为20像素 */
    }

    /* 分页指示器单个点的样式 */
    .dot {
      width: 12px;              /* 设置点的宽度为12像素 */
      height: 12px;             /* 设置点的高度为12像素 */
      border-radius: 50%;       /* 设置50%的圆角，使元素呈现圆形 */
      background: rgba(8, 42, 123, 0.2);  /* 设置点的背景颜色，带有透明度 */
      cursor: pointer;          /* 当鼠标悬停时显示指针光标 */
      transition: all 0.3s ease; /* 添加过渡效果，持续时间为0.3秒，使变化更平滑 */
    }

    .dot.active {
      background: rgb(106, 146, 239);
      transform: scale(1.2);
    }

    .nav-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgb(106, 146, 239);
      color: white;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      z-index: 20;
      transition: all 0.3s ease;
      font-size: 1.5rem;
      border: none;
      outline: none;
      padding-bottom: 4px;
    }

    .nav-arrow:hover {
      transform: translateY(-50%) scale(1.1);
      background: rgba(8, 42, 123, 0.8);
    }

    .nav-arrow.left {
      left: 20px;
      padding-right: 3px;
    }

    .nav-arrow.right {
      right: 20px;
      padding-left: 3px;
    }

    @media (max-width: 768px) {
      .about-title {
        font-size: clamp(2rem, 5vw, 3rem);
      }

      .card {
        width: 160px;
        height: 220px;
      }

      .card.left-2 {
        transform: translate(-200px) scale(0.8) translateZ(-200px);
      }

      .card.left-1 {
        transform: translate(-100px) scale(0.9) translateZ(-80px);
      }

      .card.right-1 {
        transform: translate(100px) scale(0.9) translateZ(-80px);
      }

      .card.right-2 {
        transform: translate(200px) scale(0.8) translateZ(-200px);
      }

      .member-name {
        font-size: 1.5rem;
      }

      .member-role {
        font-size: 1rem;
      }

      .member-name::before,
      .member-name::after {
        width: 40px;
      }

      .member-name::before {
        left: -60px;
      }

      .member-name::after {
        right: -60px;
      }
    }

    /* 新增书籍栏目样式 */
    .books-section {
      padding: 60px 0;
      background-color: #fff;
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      padding-bottom: 15px;
      border-bottom: 2px solid #f1f3f5;
    }

    .section-title {
      font-size: 2rem;
      font-weight: 700;
      color: rgb(106, 146, 239);
      position: relative;
      padding-left: 15px;
    }

    .section-title::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 5px;
      height: 80%;
      background-color: rgb(106, 146, 239);
      border-radius: 3px;
    }

    .books-carousel {
      position: relative;
      overflow: hidden;
    }

    .books-track {
      display: flex;
      transition: transform 0.5s ease-in-out;
      gap: 25px;
      padding: 10px 0;
    }

    .book-card {
      min-width: 200px;
      flex-shrink: 0;
      position: relative;
      height: 320px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      cursor: pointer;
    }

    .book-card:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .book-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 0.5s ease;
    }

    .book-card:hover img {
      transform: scale(1.05);
    }

    .book-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
      color: white;
      padding: 20px 15px 15px;
      transform: translateY(70%);
      transition: transform 0.4s ease-out;
    }

    .book-card:hover .book-info {
      transform: translateY(0);
    }

    .book-title {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .book-author {
      font-size: 0.9rem;
      opacity: 0.9;
      margin-bottom: 8px;
    }

    .book-desc {
      font-size: 0.8rem;
      opacity: 0.8;
      display: -webkit-box;

      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .books-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      display: flex;
      justify-content: space-between;
      pointer-events: none;
      padding: 0 10px;
    }

    .books-nav button {
      pointer-events: auto;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.9);
      border: none;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      color: rgb(8, 42, 123);
      transition: all 0.3s ease;
    }

    .books-nav button:hover {
      background-color: white;
      transform: scale(1.1);
      color: rgb(8, 42, 123);
    }

    @media (max-width: 768px) {
      .section-title {
        font-size: 1.5rem;
      }

      .book-card {
        min-width: 160px;
        height: 260px;
      }

      .books-nav button {
        width: 35px;
        height: 35px;
        font-size: 1rem;
      }
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg">
  <div class="container">
    <a class="navbar-brand" href="index.html">
      <i class="fas fa-book-reader me-2"></i>海量阅读
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="index.html">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="check.html">搜索筛选</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="login.html">登录注册</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="personal.html">个人中心</a>
        </li>
      </ul>
    </div>
  </div>
</nav>


<!-- 主要内容区域 -->
<main>
  <!-- 团队轮播图部分 -->
  <section class="team-carousel-section">
    <div class="team-carousel-container">
      <h1 class="about-title">书籍展示区域</h1>

      <div class="carousel-container">
        <button class="nav-arrow left">❮</button>

        <div class="carousel-track">
          <div class="card" data-index="0">
            <img src="img/ybygxmb.jpg" alt="Team Member 1">
          </div>
          <div class="card" data-index="1">
            <img src="img/java.jpg" alt="Team Member 2">
          </div>
          <div class="card" data-index="2">
            <img src="img/dmbj.jpg" alt="Team Member 3">
          </div>
          <div class="card" data-index="3">
            <img src="img/zfzdr.jpg" alt="Team Member 4">
          </div>
          <div class="card" data-index="4">
            <img src="img/st.jpg" alt="Team Member 5">0
          </div>
          <div class="card" data-index="5">
            <img src="img/hz.jpg " alt="Team Member 6">
          </div>
        </div>

        <button class="nav-arrow right">❯</button>
      </div>

      <div class="member-info">
        <h2 class="member-name">云边有个小卖部</h2>
        <p class="member-role">张嘉佳</p>
      </div>

      <div class="dots">
        <div class="dot active" data-index="0"></div>
        <div class="dot" data-index="1"></div>
        <div class="dot" data-index="2"></div>
        <div class="dot" data-index="3"></div>
        <div class="dot" data-index="4"></div>
        <div class="dot" data-index="5"></div>
      </div>
    </div>
  </section>

  <!-- 热度书籍栏目 -->
  <section class="books-section">
    <div class="container">
      <div class="section-header">
        <h2 class="section-title">热度书籍</h2>
        <div class="view-all">
          <a href="check.html" class="text-primary">查看全部 <i class="fas fa-angle-right ms-1"></i></a>
        </div>
      </div>

      <div class="books-carousel" id="popularBooks">
        <div class="books-track">
          <div class="book-card">
            <img src="img/zfzdr.jpg" alt="追风筝的人">
            <div class="book-info">
              <h3 class="book-title">追风筝的人</h3>
              <p class="book-author">卡勒德·胡赛尼</p>
              <p class="book-desc">一个关于友情、背叛与救赎的动人故事，跨越了几十年的阿富汗历史变迁。</p>
            </div>
          </div>
          <div class="book-card">
            <img src="img/jyzhd.jpg" alt="解忧杂货店">
            <div class="book-info">
              <h3 class="book-title">解忧杂货店</h3>
              <p class="book-author">东野圭吾</p>
              <p class="book-desc">一家可以咨询烦恼的杂货店，连接着过去与未来，演绎出一段段温暖的故事。</p>
            </div>
          </div>
          <div class="book-card">
            <img src="img/xwz.jpg" alt="小王子">
            <div class="book-info">
              <h3 class="book-title">小王子</h3>
              <p class="book-author">圣埃克苏佩里</p>
              <p class="book-desc">一部写给成年人的童话，探讨了爱、孤独与生命的意义。</p>
            </div>
          </div>
          <div class="book-card">
            <img src="img/bngd.jpg" alt="百年孤独">
            <div class="book-info">
              <h3 class="book-title">百年孤独</h3>
              <p class="book-author">加西亚·马尔克斯</p>
              <p class="book-desc">魔幻现实主义的经典之作，讲述布恩迪亚家族七代人的传奇故事。</p>
            </div>
          </div>
          <div class="book-card">
            <img src="img/rljs.jpg" alt="人类简史">
            <div class="book-info">
              <h3 class="book-title">人类简史</h3>
              <p class="book-author">尤瓦尔·赫拉利</p>
              <p class="book-desc">从认知革命、农业革命到科学革命，重新审视人类历史的发展历程。</p>
            </div>
          </div>
          <div class="book-card">
            <img src="img/st.jpg" alt="三体">
            <div class="book-info">
              <h3 class="book-title">三体</h3>
              <p class="book-author">刘慈欣</p>
              <p class="book-desc">地球人类文明和三体文明的第一次接触，拉开了宇宙文明间残酷生存竞争的序幕。</p>
            </div>
          </div>
        </div>

        <div class="books-nav">
          <button class="books-prev"><i class="fas fa-chevron-left"></i></button>
          <button class="books-next"><i class="fas fa-chevron-right"></i></button>
        </div>
      </div>
    </div>
  </section>

  <!-- 为你推荐栏目 -->
  <section class="books-section" style="background-color: #f8f9fa;">
    <div class="container">
      <div class="section-header">
        <h2 class="section-title">为你推荐</h2>
        <div class="view-all">
          <a href="check.html" class="text-primary">更多推荐 <i class="fas fa-angle-right ms-1"></i></a>
        </div>
      </div>

      <div class="books-carousel" id="recommendedBooks">
        <div class="books-track">
          <div class="book-card">
            <img src="img/hz.jpg" alt="活着">
            <div class="book-info">
              <h3 class="book-title">活着</h3>
              <p class="book-author">余华</p>
              <p class="book-desc">讲述了一个人在苦难中顽强生存的故事，探讨了生命的意义。</p>
            </div>
          </div>
          <div class="book-card">
            <img src="img/ylylbs.jpg" alt="月亮与六便士">
            <div class="book-info">
              <h3 class="book-title">月亮与六便士</h3>
              <p class="book-author">毛姆</p>
              <p class="book-desc">一个中年男人放弃安稳生活，追求艺术理想的故事。</p>
            </div>
          </div>
          <div class="book-card">
            <img src="img/wc.jpg" alt="围城">
            <div class="book-info">
              <h3 class="book-title">围城</h3>
              <p class="book-author">钱钟书</p>
              <p class="book-desc">描绘了抗战初期知识分子的群像，"围城"成为婚姻与人生的隐喻。</p>
            </div>
          </div>
          <div class="book-card">
            <img src="img/nwdsl.jpg" alt="挪威的森林">
            <div class="book-info">
              <h3 class="book-title">挪威的森林</h3>
              <p class="book-author">村上春树</p>
              <p class="book-desc">一部关于青春、爱情与成长的小说，探讨了生与死的意义。</p>
            </div>
          </div>
          <div class="book-card">
            <img src="img/xyr.jpg" alt="嫌疑人X的献身">
            <div class="book-info">
              <h3 class="book-title">嫌疑人X的献身</h3>
              <p class="book-author">东野圭吾</p>
              <p class="book-desc">一部将爱情与推理完美结合的杰作，展现了极致的爱与牺牲。</p>
            </div>
          </div>
          <div class="book-card">
            <img src="img/hlm.jpg" alt="红楼梦">
            <div class="book-info">
              <h3 class="book-title">红楼梦</h3>
              <p class="book-author">曹雪芹</p>
              <p class="book-desc">中国古典四大名著之首，描绘了贾、史、王、薛四大家族的兴衰。</p>
            </div>
          </div>
        </div>

        <div class="books-nav">
          <button class="books-prev"><i class="fas fa-chevron-left"></i></button>
          <button class="books-next"><i class="fas fa-chevron-right"></i></button>
        </div>
      </div>
    </div>
  </section>
</main>

<!-- 页脚 -->
<footer class="footer mt-5">
  <div class="container">
    <div class="row">
      <div class="col-md-4 mb-4">
        <h5 class="text-black mb-4">海量阅读</h5>
        <p>提供海量免费图书资源，让阅读无处不在</p>
      </div>
      <div class="col-md-2 mb-4">
        <h5 class="text-black mb-4">关于我们</h5>
        <ul class="list-unstyled">
          <li class="mb-2"><a href="#" class="text-decoration-none text-muted">关于海量</a></li>
          <li class="mb-2"><a href="#" class="text-decoration-none text-muted">加入我们</a></li>
          <li class="mb-2"><a href="#" class="text-decoration-none text-muted">联系方式</a></li>
        </ul>
      </div>
      <div class="col-md-2 mb-4">
        <h5 class="text-black mb-4">帮助中心</h5>
        <ul class="list-unstyled">
          <li class="mb-2"><a href="#" class="text-decoration-none text-muted">使用帮助</a></li>
          <li class="mb-2"><a href="#" class="text-decoration-none text-muted">常见问题</a></li>
          <li class="mb-2"><a href="#" class="text-decoration-none text-muted">意见反馈</a></li>
        </ul>
      </div>
      <div class="col-md-4 mb-4">
        <h5 class="text-black mb-4">订阅更新</h5>
        <p class="text-muted">订阅我们的 newsletter，获取最新图书资讯</p>
        <div class="input-group">
          <input type="email" class="form-control" placeholder="您的邮箱">
          <button class="btn btn-primary">订阅</button>
        </div>
      </div>
    </div>
    <div class="text-center py-3 border-top">
      <p class="text-muted mb-0">&copy; 2025 海量阅读 版权所有</p>
    </div>
  </div>
</footer>

<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
  // 团队轮播图功能
  const track = document.querySelector(".carousel-track");
  const cards = document.querySelectorAll(".card");
  const dots = document.querySelectorAll(".dot");
  const navArrows = document.querySelectorAll(".nav-arrow");
  const memberName = document.querySelector(".member-name");
  const memberRole = document.querySelector(".member-role");
  let currentIndex = 0;

  // 团队成员数据
  const teamMembers = [
    { name: "云边有个小卖部", role: "张嘉佳" },
    { name: "JAVA入门", role: "黑马程序员" },
    { name: "盗墓笔记", role: "南派三叔" },
    { name: "追风筝的人", role: "卡勒德.胡赛尼" },
    { name: "三体", role: "刘慈欣" },
    { name: "活着", role: "余华" }
  ];

  function updateCarousel(index) {
    // 处理索引边界
    if (index < 0) {
      index = cards.length - 1;
    } else if (index >= cards.length) {
      index = 0;
    }

    currentIndex = index;

    // 更新卡片位置
    cards.forEach((card, i) => {
      card.classList.remove("center", "left-1", "left-2", "right-1", "right-2", "hidden");

      if (i === currentIndex) {
        card.classList.add("center");
      } else if (i === (currentIndex - 1 + cards.length) % cards.length) {
        card.classList.add("left-1");
      } else if (i === (currentIndex - 2 + cards.length) % cards.length) {
        card.classList.add("left-2");
      } else if (i === (currentIndex + 1) % cards.length) {
        card.classList.add("right-1");
      } else if (i === (currentIndex + 2) % cards.length) {
        card.classList.add("right-2");
      } else {
        card.classList.add("hidden");
      }
    });

    // 更新指示器
    dots.forEach((dot, i) => {
      dot.classList.toggle("active", i === currentIndex);
    });

    // 更新成员信息
    memberName.textContent = teamMembers[currentIndex].name;
    memberRole.textContent = teamMembers[currentIndex].role;
  }

  // 左右箭头点击事件
  navArrows.forEach(arrow => {
    arrow.addEventListener("click", () => {
      if (arrow.classList.contains("left")) {
        updateCarousel(currentIndex - 1);
      } else {
        updateCarousel(currentIndex + 1);
      }
    });
  });

  // 指示器点击事件
  dots.forEach((dot, i) => {
    dot.addEventListener("click", () => {
      updateCarousel(i);
    });
  });

  // 卡片点击事件
  cards.forEach((card, i) => {
    card.addEventListener("click", () => {
      updateCarousel(i);
    });
  });

  // 键盘事件
  document.addEventListener("keydown", (e) => {
    if (e.key === "ArrowLeft") {
      updateCarousel(currentIndex - 1);
    } else if (e.key === "ArrowRight") {
      updateCarousel(currentIndex + 1);
    }
  });

  // 触摸滑动事件
  let touchStartX = 0;
  let touchEndX = 0;

  document.addEventListener("touchstart", (e) => {
    touchStartX = e.changedTouches[0].screenX;
  });

  document.addEventListener("touchend", (e) => {
    touchEndX = e.changedTouches[0].screenX;
    handleSwipe();
  });

  function handleSwipe() {
    const swipeThreshold = 50;
    const diff = touchStartX - touchEndX;
    if (Math.abs(diff) > swipeThreshold) {
      if (diff > 0) {
        updateCarousel(currentIndex + 1);
      } else {
        updateCarousel(currentIndex - 1);
      }
    }
  }

  // 书籍轮播功能
  function initBooksCarousel(carouselId) {
    const carousel = document.getElementById(carouselId);
    const track = carousel.querySelector('.books-track');
    const prevBtn = carousel.querySelector('.books-prev');
    const nextBtn = carousel.querySelector('.books-next');
    const cards = carousel.querySelectorAll('.book-card');

    if (!carousel || !track || !prevBtn || !nextBtn || !cards.length) return;

    let position = 0;
    const cardWidth = cards[0].offsetWidth + 25; // 卡片宽度 + 间距
    const visibleCards = window.innerWidth < 768 ? 2 : 4;
    const maxPosition = Math.max(0, cards.length - visibleCards);

    function updatePosition() {
      track.style.transform = `translateX(-${position * cardWidth}px)`;

      // 控制按钮状态
      prevBtn.disabled = position === 0;
      nextBtn.disabled = position >= maxPosition;

      prevBtn.style.opacity = position === 0 ? 0.5 : 1;
      nextBtn.style.opacity = position >= maxPosition ? 0.5 : 1;
    }

    prevBtn.addEventListener('click', () => {
      if (position > 0) {
        position--;
        updatePosition();
      }
    });

    nextBtn.addEventListener('click', () => {
      if (position < maxPosition) {
        position++;
        updatePosition();
      }
    });

    // 点击书籍卡片跳转到详情页
    cards.forEach(card => {
      card.addEventListener('click', () => {
        window.location.href = 'introduce.html';
      });
    });

    // 窗口大小变化时重新计算
    window.addEventListener('resize', () => {
      const newVisibleCards = window.innerWidth < 768 ? 2 : 4;
      const newMaxPosition = Math.max(0, cards.length - newVisibleCards);
      position = Math.min(position, newMaxPosition);
      updatePosition();
    });
  }

  // 初始化书籍轮播
  window.addEventListener('DOMContentLoaded', () => {
    initBooksCarousel('popularBooks');
    initBooksCarousel('recommendedBooks');
    updateCarousel(0); // 初始化团队轮播
  });
</script>
</body>
</html>
